import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    state={
      count:1
    }

    handleClick = ()=>{
      // this.setState({
      //   count:this.state.count+1
      // })
      // console.log("count:",this.state.count);
      // // 可以多次使用，但是他依赖的值并没有因为上次而改变
      // this.setState({
      //   count:this.state.count+1
      // })
      
      // 推荐的使用方法
      this.setState((state,props)=>{
        return {
          count:state.count+1
        }
      },()=>{
        console.log("打印更新完成后的值",this.state.count);
      }) 
      console.log("count:",this.state.count); 
    }
// 钩子函数，如果return true 会重新渲染，为false 不会重新渲染
    shouldComponentUpdate(nextProps,nextState){ // 最新的props和最新的state
      console.log("最新的state",nextState);        
      // 可以通过this.state 获取到更新前的数据
      console.log("异步执行，所以数据还没有来得及改变",this.state);
      return false
    }

    render(){
      return(
        <div>
          <h1>记数器：{this.state.count}</h1>
          <button onClick={this.handleClick}>+1</button>
        </div>
      )
    }
  }

ReactDOM.render(<App/>,document.getElementById('root'))

